<template>
	<view class="container">
		<view class="title">
			身份证照片
		</view>
		<view class="subtitle">
			请上传身份证照片、仅用于{{$tokenName}}提现
		</view>
		<view class="pic-container">
			<view class="pic" @click="toTackPhoto(0)">
				<image :src="realInfo.frontUrl === ''?'/static/my/font.png':realInfo.frontUrl" mode="aspectFill"></image>
			</view>
			<view class="pic" @click="toTackPhoto(1)">
				<image :src="realInfo.backUrl === ''?'/static/my/back.png':realInfo.backUrl" mode="aspectFill"></image>
			</view>
		</view>
		<view class="btn">
			<button type="primary" @click="toUserInfo">下一步</button>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="pop">
				<view class="inner">
					<view class="title">
						确认信息
					</view>
					<view class="ipt">
						<input type="text" v-model="realInfo.certNo" placeholder="身份证号" />
					</view>
					<view class="ipt">
						<input type="text" v-model="realInfo.name" placeholder="姓名" />
					</view>
					<view class="btn">
						<button @click="toRealNameRegister">保存</button>
						<button @click="cancle">取消</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<canvas class="canvas" v-if="isCanvasShow" :style="'width:' + canvasWidth + 'px;height:' + canvasHeight + 'px;'"
			canvas-id="myCanvas" :width="canvasWidth" :height="canvasHeight" id="myCanvas"></canvas>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		reqRealNameRegister,
	} from '@/apis/my.js'
	export default {
		data() {
			return {
				// 身份证正面照
				memberId: '',
				tempUrl: '',
				access_token: '',
				canvasWidth: 0,
				canvasHeight: 0,
				canvas: null,
				isCanvasShow: false,
				// frontUrl: '',
				// // 身份证号码
				// certNo: '',
				// // 姓名
				// name: '',
				// backUrl: '',
				// // 是否长期有效 1 长期 0 非长期
				// certValidityType: '',
				// // 结束日期
				// certEndDate: '',
				// // 开始日期
				// certBeginDate: '',
				// nextNum: 0,
				// realInfo: {
				// 	frontUrl: '',
				// 	// 身份证号码
				// 	certNo: '',
				// 	// 姓名
				// 	name: '',
				// 	backUrl: '',
				// 	// 是否长期有效 1 长期 0 非长期
				// 	certValidityType: '',
				// 	// 结束日期
				// 	certEndDate: '',
				// 	// 开始日期
				// 	certBeginDate: '',
				// 	nextNum: 0,
				// }
			};
		},
		onLoad(options) {
			this.canvas = uni.createCanvasContext('myCanvas', this)
			this.memberId = this.$store.getters.userInfo.id;
			if (options.tempPath) {
				this.tempUrl = options.tempPath;
				console.log("拍照识别的路径", this.tempUrl);
				this.type = options.type;
				this.OCRImg();
			}
		},
		computed: {
			...mapGetters('realName', ['realInfo']),
			$tokenName(){
        return this.$config.tokenName
      }
		},
		methods: {
			async toRealNameRegister() {
				let {
					memberId,
				} = this;
				let {
					frontUrl,
					certNo,
					name,
					backUrl,
					certValidityType,
					certEndDate,
					certBeginDate
				} = this.realInfo;
				if(certNo.length != 18){
					uni.utils.toast("身份号有误，请手动确认");
					return;
				}
				let res = await reqRealNameRegister({
					memberId,
					frontUrl,
					certNo,
					name,
					backUrl,
					certValidityType,
					certEndDate,
					certBeginDate
				})
				if (res.code === 200) {
					uni.showToast({
						title: '认证成功，即将绑定银行卡',
						icon: 'success'
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/packageB/pages/bankCard/bankCard'
						})
					}, 1500)
				} else {
					uni.utils.toast(res.message);
				}
			},
			async OCRImg() {
				this.$store.dispatch('realName/handlerImg', {
					type: this.type,
					tempUrl: this.tempUrl,
				})
			},
			toTackPhoto(type) {
				// uni.redirectTo({
				// 	url: '/packageB/pages/takePhoto/takePhoto?' + 'type=' + type,
				// })
				var image_width = 680 / 750 * wx.getSystemInfoSync().windowWidth;
				var image_height = 435 / 750 * wx.getSystemInfoSync().windowWidth;
				wx.showActionSheet({
					itemList: ['从相册中选择', '拍照'], // 选择方式
					success: (res) => {
						if (res.tapIndex == 1) {
							uni.redirectTo({
								url: '/packageB/pages/takePhoto/takePhoto?' + 'type=' + type,
							})
						} else {
							uni.chooseMedia({
								mediaType: ['image'],
								count: 1,
								sizeType: ['compressed'],
								sourceType: ['album'],
								success: async (res1) => {
									if (res1.errMsg == 'chooseMedia:ok') {
										this.tempUrl = res1.tempFiles[0].tempFilePath;
										const size = res1.tempFiles[0].size;
										wx.getImageInfo({
											src: this.tempUrl,
											success: (res2) => {
												console.log(res2,"@@@@@@@");
												if (res2.width > res2.height) {
													let quality = 100;
													uni.compressImage({
														src:this.tempUrl,
														quality,
														compressedWidth:image_width * 2,
														compressedHeight:image_height * 2,
														success:(res0)=>{
															this.tempUrl = res0.tempFilePath;
															this.type = type;
															this.OCRImg();
														}
													})
												} else {
													// uni.createOffscreenCanvas();
													this.isCanvasShow = true;
													this.canvasWidth = res2.height;
													this.canvasHeight = res2.width;
													this.canvas.rotate(-90 * Math.PI / 180);
													this.canvas.drawImage(this.tempUrl, -res2.width, 0, res2.width, res2.height);
													this.canvas.draw()
													setTimeout(() => {
														uni.canvasToTempFilePath({
															canvasId: 'myCanvas',
															x: 0,
															y: 0,
															width: res2.height * 2,
															height: res2.width * 2,
															destWidth: image_width * 2,
															destHeight: image_height * 2,
															quality:1,
															success: (res3) => {
																this.tempUrl = res3.tempFilePath;
																this.isCanvasShow = false;
																this.type = type;
																this.OCRImg();
															},
														});
													}, 400)
												}
											}
										})
									}
								},
							})
						}

					}
				})
			},
			toUserInfo() {
				if (this.realInfo.frontOK && this.realInfo.backOK) {
					this.$refs.popup.open()
					if(this.realInfo.certNo.length != 18){
						uni.utils.toast("身份号有误，请手动确认");
					}
				} else {
					uni.utils.toast('请填写完整的信息');
				}
			},
			cancle() {
				this.$refs.popup.close();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.container {
		padding: 20rpx 20rpx;

		.title {
			margin-bottom: 20rpx;
			font-size: 40rpx;
			color: #1a1a1a;
			font-weight: bold;
			padding-left: 20rpx;
		}

		.subtitle {
			margin-bottom: 20rpx;
			padding-left: 20rpx;
			font-size: 28rpx;
			color: #666;
		}

		.pic-container {
			background-color: #fff;
			padding: 40rpx 20rpx;
			border-radius: 8rpx;
			width: 100%;
			margin-bottom: 20rpx;

			.pic {
				width: 670rpx;
				height: 394rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.pic:nth-child(1) {
				margin-bottom: 40rpx;
			}
		}

		.btn {
			width: 100%;
			display: flex;
			justify-content: center;
			height: 88rpx;

			/deep/ button {
				width: 332rpx !important;
				height: 88rpx !important;
				background-color: #2f64ff !important;
				color: #fff;
				border-radius: 16rpx;
			}
		}

		.canvas {
			margin-top: 500rpx;
		}

		.pop {
			padding: 20rpx 20rpx;
			width: 600rpx;
			border-radius: 20rpx;
			background-color: #fff;

			.inner {
				padding: 40rpx 20rpx;

				.title {
					color: #1a1a1a;
					font-weight: bold;
					margin-bottom: 20rpx;
					font-size: 32rpx;
					text-align: center;
				}

				.ipt {
					margin-bottom: 30rpx;
					border-bottom: 1rpx solid #999;

					input {
						height: 80rpx;
						margin-bottom: 20rpx;
					}
				}

				.btn {
					width: 100%;
					display: flex;
					justify-content: space-around;
					height: 88rpx;

					/deep/ button {
						width: 200rpx !important;
						height: 60rpx !important;
						line-height: 60rpx;
						background-color: #2f64ff !important;
						color: #fff;
						border-radius: 16rpx;
					}

					/deep/ button:nth-child(2) {
						width: 200rpx !important;
						height: 60rpx !important;
						line-height: 60rpx;
						background-color: #999 !important;
						color: #fff;
						border-radius: 16rpx;
					}
				}
			}
		}
	}
</style>